<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-01 15:41:17
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:48:03
 * @FilePath: \nien-vue3-admin\src\views\BusinessConfiguration\sellPriceManagement\components\InpValFormat.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="tsx">
import { defineComponent, ref } from 'vue'

import { ElInput } from 'element-plus'

const matchMap = {
  // 国家地区
  national(item, index) {
    const match = item.match(/(\S+)\s+(\S+)/)
    if (match) {
      return match.slice(1, 3)
    }
    return match
  },
  // 重量
  weight(item, index) {
    const match = item.trim().match(/^((\d+-\d+)|\d+)$/)
    if (match) {
      if (match[0].indexOf('-') !== -1) {
        return match[0].split('-')
      } 
      return match[0]
    }
    return match
  },
  // 修改价格管理
  priceManage(item, index) {
    const split = '& @ &'
    const match = item.trim().replaceAll(/\s+/g, split).split(split)
    return match
  },

}
export default defineComponent({
  components: { ElInput },
  props: {
    // 格式化后的值
    formatValue: {
      type: Array,
      default: () => [],
    },
    // 行匹配规则
    lineMatchType: {
      type: String,
      default: 'national',
    },
  },
  emits: ['update:formatValue'],
  setup(props, context) {
    const valueFormate = (value) => {
      const res = value.split('\n').map(matchMap[props.lineMatchType])
      return res
    }
    const curVal = ref('')
    const formatData = () => {
      context.emit('update:formatValue', valueFormate(curVal.value))
    }
    return {
      curVal,
      formatData,
    }
  },
  methods: {
    reset() {
      this.curVal = ''
      this.$emit('update:formatValue', [])
    },
  },
  render() {
    return (
      <el-input 
        type='textarea' 
        rows='2' 
        v-model={this.curVal} onInput={this.formatData} 
        { ...this.$attrs }
      ></el-input>
    )
  },
})
</script>